<template>
  <Row class="u-main-content ureport-content">
    <Col :span="24" class="ureport-title">
      <h2>
        用电安全检测报告
      </h2>
    </Col>
    <Col :span="24" style="margin-bottom: 10px;">
      <div>
        <h3 style="margin: 10px 0;padding: 0;">
          一&nbsp;&nbsp;用电安全概况总览
        </h3>
        <Button
          style="float:right;"
          type="primary"
          @click="handleExportAllReport"
          >导出所有诊断报告</Button
        >
      </div>
      <p
        style="text-align: center;font-size:14px;"
        v-show="topTableData.length != 0"
      >
        <span class="text-red">{{ commonBase.companyName }}</span
        >&nbsp;-&nbsp;上周（{{ commonBase.startTime }} 至{{
          commonBase.endTime
        }}）用电安全检测情况：合计 <span>{{ commonBase.totalSite }}</span
        >&nbsp;个监测点，
        <span class="text-green">{{ commonBase.normalCount }}</span
        >&nbsp;个正常， <span class="text-red">{{ commonBase.errorCount }}</span
        >&nbsp;个报警。
      </p>
    </Col>
    <!-- top表格 -->
    <Col span="24" style="margin-bottom: 10px;">
      <Table
        :columns="columnsTop"
        :data="topTableData"
        border
        :loading="pageInfo.Tloading"
      ></Table>
    </Col>
    <!-- top 总结信息 -->
    <Col span="24" style="margin-bottom: 10px;">
      <h4 style="margin:0;padding:0;margin-bottom: 5px;">
        注： <span class="text-red">红色&nbsp;</span>为报警，
        <span class="text-green">绿色&nbsp;</span>为正常，
        <span>-&nbsp;</span>为无此类数据
      </h4>
      <p v-show="topTableData.length != 0">
        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 报警次数总计为&nbsp;{{
          topSafeInfo.errorCount
        }}&nbsp;次。 剩余电流报警&nbsp;{{
          topSafeInfo.residualcurrent
        }}&nbsp;次， 线缆电流报警{{ topSafeInfo.overcurrent }}次，线缆温度报警{{
          topSafeInfo.temperature
        }}次， 过压报警&nbsp;{{ topSafeInfo.overvoltage }}&nbsp;次，
        欠压报警&nbsp;{{ topSafeInfo.undervoltage }}&nbsp;次，
        电压畸变率报警&nbsp;{{ topSafeInfo.thdv }}&nbsp;次，
        电流畸变率报警&nbsp;{{ topSafeInfo.thid }}&nbsp;次， 电压不平衡&nbsp;{{
          topSafeInfo.vuf
        }}&nbsp;次， 电流不平衡&nbsp;{{ topSafeInfo.cuf }}&nbsp;次，
        中性线过载&nbsp;{{ topSafeInfo.neutralLineOverload }}&nbsp;次。
        <span class="text-red" v-show="errorMaxInfo.errorMaxCount > 0"
          >&nbsp;&nbsp;其中监测点
          {{ errorMaxInfo.errorMaxDeviceName }}&nbsp;&nbsp;
          报警次数最多，为&nbsp;{{ errorMaxInfo.errorMaxCount }}&nbsp;次。</span
        >
        <span style="font-weight: bold;color: #00B050;"
          >详情请点击监控报表中监测点名称进入用电安全隐患特征分析。</span
        >
      </p>
    </Col>
    <!-- top表格分页 -->
    <Col class="panel page-panel cf" :span="24" style="margin: 10px 0;">
      <Page
        class="fr"
        :total="pageInfo.Ttotal"
        :page-size="15"
        :current="pageInfo.Tpage"
        @on-change="topSwitchPage"
      ></Page>
    </Col>
    <div>
      <Button style="float:right;" @click="handleExportPower" type="primary"
        >导出</Button
      >
    </div>
    <!-- 底部标题 -->
    <Col
      :span="24"
      style="margin: 10px auto;margin-bottom: 10px;"
      ref="tableBottom"
    >
      <h3>二&nbsp;&nbsp;能源计量数据</h3>
    </Col>
    <!-- 底部表格 -->
    <Col span="24" style="margin-bottom: 10px;">
      <Table
        :columns="columnsBottom"
        :data="bottomTableData"
        border
        :loading="pageInfo.Bloading"
      ></Table>
    </Col>
    <Col span="24" style="margin-bottom: 10px">
      <h4 style="margin:0;padding:0;margin-bottom: 5px;">
        注：WEFC-117不支持能源计量功能。
      </h4>
    </Col>
    <!-- bottom表格分页 -->
    <Col class="panel page-panel cf" span="24" style="margin: 10px 0 10px 0">
      <Page
        class="fr"
        :total="pageInfo.Btotal"
        :page-size="15"
        :current="pageInfo.Bpage"
        @on-change="bottomSwitchPage"
      ></Page>
    </Col>
    <!-- 三标题 -->
    <Col :span="24" style="margin: 10px auto;margin-bottom: 0px;">
      <h3>三&nbsp;&nbsp;月度检测报告</h3>
    </Col>
    <Col
      :span="24"
      style="margin: 10px auto;margin-bottom: 0px;padding-left: 20px;font-size: 14px;"
    >
      <p>
        {{ commonBase.companyName }}-上月（{{
          moment()
            .add(-1, "month")
            .format("YYYY-MM")
        }}）月度检测报告请点击此处
        <a
          href="javascript:;"
          style="color:#00ff00;margin:0 5px;"
          @click="toDetail()"
          >查看详情</a
        >
        或<a
          href="javascript:;"
          style="color:#00ff00;margin:0 5px;"
          @click="toDetail(true)"
          >导出</a
        >
      </p>
    </Col>
    <Col :span="24" class="page-bottom" style="background-color:#fff;"> </Col>
  </Row>
</template>
<script>
import {
  getCompanyList,
  getTopList,
  getBottomList,
  downloadFullPdf,
  downloadFullPdfMonth,
  downloadReportPower
} from "@/api";
import PermissionMixin from "../PermissionMixin";
import { mapGetters } from "vuex";

const filterPrecent = value => `${(value * 100).toFixed(2)} %`;

const URL = process.env.VUE_APP_REPORT_URL;

export default {
  computed: {
    ...mapGetters(["token"])
  },
  mixins: [PermissionMixin],
  mounted() {
    const vm = this;
    vm._getTopList();
    vm._getBottomList();
  },

  data() {
    return {
      params: {
        companyId: ""
      },

      pageInfo: {
        Tpage: 1,
        Ttotal: 0,
        Tloading: false,
        Bpage: 1,
        Btotal: 0,
        Bloading: false
      },
      columnsBottom: [
        {
          title: "序号",
          align: "center",
          type: "index"
        },
        {
          title: "监测点名称",
          align: "center",
          key: "deviceName"
        },
        {
          title: "设备型号",
          align: "center",
          key: "deviceVersion"
        },
        {
          title: "能耗数据统计",
          align: "center",
          children: [
            {
              title: "本周能耗",
              align: "center",
              render: (h, params) => {
                const row = { ...params.row };
                if (row.deviceType == 1) {
                  return h("span", `${row.weekPower}kWh`);
                } else {
                  return h("span", "-");
                }
              }
            },
            {
              title: "上周能耗",
              align: "center",
              render: (h, params) => {
                const row = { ...params.row };
                if (row.deviceType == 1) {
                  return h("span", `${row.lastweekPower}kWh`);
                } else {
                  return h("span", "-");
                }
              }
            },
            {
              title: "同比",
              align: "center",
              render: (h, params) => {
                const row = { ...params.row };
                if (row.deviceType == 1) {
                  return h("span", `${row.powerRange}kWh`);
                } else {
                  return h("span", "-");
                }
              }
            },
            {
              title: "同比率",
              align: "center",
              render: (h, params) => {
                const row = { ...params.row };
                const _t = this;
                if (row.deviceType == 1) {
                  return h("span", filterPrecent(row.powerRate));
                } else {
                  return h("span", "-");
                }
              }
            },
            {
              title: "本周能耗排名",
              align: "center",
              render: (h, params) => {
                const row = { ...params.row };
                if (row.deviceType == 1) {
                  return h("span", row.weekTop);
                } else {
                  return h("span", "-");
                }
              }
            },
            {
              title: "示数",
              align: "center",
              render: (h, params) => {
                const row = { ...params.row };
                if (row.deviceType == 1) {
                  return h("span", `${row.newestValue}kWh`);
                } else {
                  return h("span", "-");
                }
              }
            },
            {
              title: "示数排名",
              align: "center",
              render: (h, params) => {
                const row = { ...params.row };
                if (row.deviceType == 1) {
                  return h("span", row.newestTop);
                } else {
                  return h("span", "-");
                }
              }
            }
          ]
        }
      ],

      columnsTop: [
        {
          title: "序号",
          align: "center",
          type: "index"
        },
        {
          title: "监测点名称",
          align: "center",
          render: (h, params) => {
            const row = { ...params.row };
            const _t = this;

            if (row.deviceType == 2 || row.deviceType == 1) {
              return h(
                "Poptip",
                {
                  props: {
                    trigger: "hover",
                    placement: "right"
                  }
                },
                [
                  h(
                    "span",
                    {
                      class: {
                        routerlinkStyle: true,
                        "text-green": true,
                        "text-red": row.errorCount > 0
                      }
                    },
                    row.deviceName
                  ),
                  h(
                    "div",
                    {
                      slot: "content"
                    },
                    [
                      h(
                        "Button",
                        {
                          props: {
                            size: "small"
                          },

                          on: {
                            click: () => {
                              _t.goDetailWeek(row, false);
                            }
                          }
                        },
                        "查看详情"
                      )
                    ]
                  )
                ]
              );
            } else {
              return h(
                "a",
                {
                  class: {
                    routerlinkStyle: true,
                    routerlinkStyleDisable:
                      row.deviceType !== 1 && row.deviceType !== 2,
                    "text-green": true,
                    "text-red": row.errorCount > 0
                  }
                },
                row.deviceName
              );
            }
          }
        },
        {
          title: "设备型号",
          align: "center",
          key: "deviceVersion"
        },
        {
          title: "安全隐患类型",
          align: "center",
          children: [
            {
              title: "剩余电流",
              align: "center",
              render: (h, params) => {
                const row = { ...params.row };
                const _t = this;
                if (!!row.havData) {
                  return _t.filterState(h, row.residualcurrent);
                } else {
                  return h("span", "-");
                }
              }
            },
            {
              title: "线缆温度",
              align: "center",
              render: (h, params) => {
                const row = { ...params.row };
                const _t = this;
                if (!!row.havData) {
                  return _t.filterState(h, row.temperature);
                } else {
                  return h("span", "-");
                }
              }
            },
            {
              title: "线缆电流温度过载",
              align: "center",
              render: (h, params) => {
                const row = { ...params.row };
                const _t = this;
                if (!!row.havData) {
                  if (row.deviceType === 2) {
                    return h("span", "-");
                  } else {
                    return _t.filterState(h, row.overcurrent);
                  }
                } else {
                  return h("span", "-");
                }
              }
            },
            {
              title: "过压",
              align: "center",
              render: (h, params) => {
                const row = { ...params.row };
                const _t = this;
                if (!!row.havData) {
                  if (row.deviceType == 2) {
                    return h("span", "-");
                  } else {
                    return _t.filterState(h, row.overvoltage);
                  }
                } else {
                  return h("span", "-");
                }
              }
            },
            {
              title: "欠压",
              align: "center",
              render: (h, params) => {
                const row = { ...params.row };
                const _t = this;
                if (!!row.havData) {
                  if (row.deviceType == 2) {
                    return h("span", "-");
                  } else {
                    return _t.filterState(h, row.undervoltage);
                  }
                } else {
                  return h("span", "-");
                }
              }
            },
            {
              title: "电压畸变率",
              align: "center",
              render: (h, params) => {
                const row = { ...params.row };
                const _t = this;
                if (!!row.havData) {
                  if (row.deviceType == 2) {
                    return h("span", "-");
                  } else {
                    return _t.filterState(h, row.thdv);
                  }
                } else {
                  return h("span", "-");
                }
              }
            },
            {
              title: "电流畸变率",
              align: "center",
              render: (h, params) => {
                const row = { ...params.row };
                const _t = this;
                if (!!row.havData) {
                  if (row.deviceType == 2) {
                    return h("span", "-");
                  } else {
                    return _t.filterState(h, row.thid);
                  }
                } else {
                  return h("span", "-");
                }
              }
            },
            {
              title: "电压不平衡",
              align: "center",
              render: (h, params) => {
                const row = { ...params.row };
                const _t = this;
                if (!!row.havData) {
                  if (row.deviceType == 2) {
                    return h("span", "-");
                  } else {
                    return _t.filterState(h, row.vuf);
                  }
                } else {
                  return h("span", "-");
                }
              }
            },
            {
              title: "电流不平衡",
              align: "center",
              render: (h, params) => {
                const row = { ...params.row };
                const _t = this;
                if (row.realDevice) {
                } else {
                }
                if (!!row.havData) {
                  if (row.deviceType == 2) {
                    return h("span", "-");
                  } else {
                    return _t.filterState(h, row.cuf);
                  }
                } else {
                  return h("span", "-");
                }
              }
            },
            {
              title: "中性线过载",
              align: "center",
              render: (h, params) => {
                const row = { ...params.row };
                const _t = this;
                if (!!row.havData) {
                  if (row.deviceType == 2) {
                    return h("span", "-");
                  } else {
                    return _t.filterState(h, row.neutralLineOverload);
                  }
                } else {
                  return h("span", "-");
                }
              }
            }
          ]
        }
      ],
      topSafeInfo: {},
      commonBase: {},
      errorMaxInfo: {},
      topTableData: [],
      bottomTableData: []
    };
  },
  methods: {
    handleExportPower() {
      const vm = this;
      const token = vm.token;
      const companyId = vm.companyId;
      const url = downloadReportPower(companyId, token);
      window.open(url, "_black");
    },
    toDetail(download = false) {
      const vm = this,
        companyId = vm.companyId,
        token = vm.token;
      let path = null;
      if (download) {
        path = `${URL}/pc/monthly/106/${companyId}/${token}/true`;
        // path = downloadFullPdfMonth(companyId, token);
      } else {
        path = `${URL}/pc/monthly/106/${companyId}/${token}/false`;
      }
      window.open(path, "_blank");
    },

    goDetailWeek(row, download) {
      const vm = this;
      const { deviceVersion } = row;
      const companyId = vm.companyId;
      const deviceId = row.deviceId;
      const token = vm.token;
      let path = null;
      if (deviceVersion.indexOf("106") > -1) {
        path = `${URL}/pc/weekly/106/${companyId}/${deviceId}/${token}`;
      } else {
        path = `${URL}/pc/weekly/117/${companyId}/${deviceId}/${token}/false`;
      }

      window.open(path, "_blank");
    },

    filterState(h, row) {
      if (row === 0) {
        return h("span", {
          class: {
            circle_normal: true
          }
        });
      } else if (row > 0) {
        return h("span", {
          class: {
            circle_error: true
          }
        });
      }
    },

    handleExportAllReport() {
      const vm = this;
      const companyId = vm.companyId;
      const params = { companyId };
      const token = vm.token;
      const url = downloadFullPdf(companyId, token);
      window.open(url, "_black");
    },

    // 切换分页
    topSwitchPage(index) {
      const vm = this;
      vm.pageInfo.Tpage = index;
      vm._getTopList();
    },

    bottomSwitchPage(index) {
      let vm = this;
      vm.pageInfo.Bpage = index;
      vm._getBottomList();
    },

    // 获取上表格数据
    async _getTopList() {
      const _this = this;
      _this.pageInfo.Tloading = true;
      let params = {
        page: _this.pageInfo.Tpage,
        companyId: _this.companyId,
        size: 15
      };
      const res = await getTopList(params);
      if (res.code === 200) {
        _this.topTableData = res.data["safe-list"];
        _this.errorMaxInfo = {
          errorMaxCount: res.data.errorMaxCount,
          errorMaxDeviceName: res.data.errorMaxDeviceName
        };
        _this.topSafeInfo = res.data["safe-info"];
        _this.commonBase = res.data.base;
        _this.pageInfo.Ttotal = res.data.pageInfo.pages * 15;
        _this.pageInfo.Tloading = false;
      }
    },

    // 获取下表格数据
    async _getBottomList() {
      const _this = this;
      _this.pageInfo.Bloading = true;
      let params = {
        page: _this.pageInfo.Bpage,
        companyId: _this.companyId,
        size: 15
      };
      const res = await getBottomList(params);
      if (res.code === 200) {
        setTimeout(() => {
          _this.pageInfo.Bloading = false;
        }, 500);
        this.bottomTableData = res.data.list;
        _this.pageInfo.Btotal = res.data.pageInfo.pages * 15;
      }
    }
  }
};
</script>
